<template>
  <div>

    <div>
      <Button type="primary" @click="manageModal" style="margin-left: 20px;float: right;">管理车辆信息</Button>
    </div>

    <Modal v-model="modal" title="车辆信息" width="1150px">
      <Button type="primary" size="small" style="float: right;margin-right: 25px;margin-bottom: 20px;"
        @click="addModal()">添加车辆</Button>
      <Table border :columns="columns1" :data="data1" style="margin: 25px;clear: both;">
        <template #action="{ row }">
          <Button type="primary" size="small" style="margin-right: 5px" @click="carInfo(row.id)">查看&修改</Button>
          <Button type="error" size="small" style="margin-right: 5px" @click="delCarInfo(row.id)">删除</Button>
        </template>
      </Table>
      <div slot="footer">
        <Button type="primary" size="large" @click="modal = false">关闭</Button>
      </div>
    </Modal>

    <Modal v-model="modal1" title="添加/修改车辆信息" width="1150px" :loading="loading">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="车主姓名" prop="name">
          <Input v-model="formValidate.name" placeholder="请输入车主姓名"></Input>
        </FormItem>
        <FormItem label="车牌号" prop="car_num">
          <Input v-model="formValidate.car_num" placeholder="请输入车牌号"></Input>
        </FormItem>
        <FormItem label="品牌型号" prop="brand">
          <Input v-model="formValidate.brand" placeholder="请输入品牌型号"></Input>
        </FormItem>
        <FormItem label="车身颜色" prop="color">
          <Input v-model="formValidate.color" placeholder="请输入车身颜色"></Input>
        </FormItem>
        <FormItem label="使用性质" prop="use_type">
          <Select v-model="formValidate.use_type" placeholder="选择车辆使用性质">
            <Option value="7e7066ef-fd98-11ec-9380-0242ac11000a">家庭自用汽车</Option>
            <Option value="84d09308-fd98-11ec-9380-0242ac11000a">非营业客车</Option>
            <Option value="8963f862-fd98-11ec-9380-0242ac11000a">营业客车</Option>
            <Option value="9018ebca-fd98-11ec-9380-0242ac11000a">非营业货车</Option>
          </Select>
        </FormItem>
        <FormItem label="车辆类型" prop="car_type">
          <Select v-model="formValidate.car_type" placeholder="选择车辆类型">
            <Option value="35a1444d-fd98-11ec-9380-0242ac11000a">微型载货（客）汽车</Option>
            <Option value="41af0932-fd98-11ec-9380-0242ac11000a">小型载货（客）汽车</Option>
            <Option value="47b0b0b5-fd98-11ec-9380-0242ac11000a">中型载货（客）汽车</Option>
            <Option value="4e4f9d1f-fd98-11ec-9380-0242ac11000a">大型/重型载货（客）汽车</Option>
            <Option value="54a1d220-fd98-11ec-9380-0242ac11000a">挂车</Option>
            <Option value="59fb1d33-fd98-11ec-9380-0242ac11000a">三轮汽车</Option>
            <Option value="5f3fc5f8-fd98-11ec-9380-0242ac11000a">低速货车</Option>
            <Option value="643a98e2-fd98-11ec-9380-0242ac11000a">摩托车</Option>
          </Select>
        </FormItem>
        <FormItem label="购买时间">
          <DatePicker type="date" @on-change="formValidate.buy_time = $event" :value="formValidate.buy_time"
            placeholder="请选择购买时间" format="yyyy/M/d" style="width: 200px" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" size="large" @click="updateCarInfo()">确定</Button>
      </div>
    </Modal>

  </div>
</template>

<script>
import {
  addCarInfo,
  carInfoList,
  updateCarInfo
} from '@/api/z-new-grid'

export default {
  name: 'carmanage',
  data () {
    return {
      doorplate_id: '',
      severUserInfo: {},
      modal: false,
      columns1: [
        {
          title: '车主姓名',
          key: 'name'
        },
        {
          title: '车牌号',
          key: 'car_num'
        },
        {
          title: '品牌型号',
          key: 'brand'
        },
        {
          title: '车身颜色',
          key: 'color'
        },
        {
          title: '使用性质',
          key: 'use_type_name'
        },
        {
          title: '车辆类型',
          key: 'car_type_name'
        },
        {
          title: '购买时间',
          key: 'buy_time'
        },
        {
          title: '添加时间',
          key: 'create_time',
          width: 150
        },
        {
          title: '操作',
          width: 200,
          slot: 'action',
          align: 'center'
        }
      ],
      data1: [],
      modal1: false,
      formValidate: {},
      ruleValidate: {
        name: [
          {
            required: true,
            message: '请输入车主姓名',
            trigger: 'blur'
          }
        ],
        car_num: [
          {
            required: true,
            message: '请输入车牌号',
            trigger: 'blur'
          }
        ],
        brand: [
          {
            required: true,
            message: '请输入车辆品牌',
            trigger: 'blur'
          }
        ],
        color: [
          {
            required: true,
            message: '请输入车辆颜色',
            trigger: 'blur'
          }
        ],
        use_type: [
          {
            required: true,
            message: '请选择使用性质',
            trigger: 'change'
          }
        ],
        car_type: [
          {
            required: true,
            message: '请选择车辆类型',
            trigger: 'change'
          }
        ]
      },
      addflag: 0,
      loading: true
    }
  },
  methods: {
    initCarManage (e) {
      this.doorplate_id = e
      console.log('aaaaaaaaaa', this.doorplate_id)
    },
    manageModal () {
      this.modal = true
      this.carInfoList()
    },
    carInfoList () {
      let data = {
        doorplate_id: this.doorplate_id
      }
      carInfoList(data).then((ret) => {
        if (ret.data.errcode === 0) {
          this.data1 = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
      this.modal = true
    },
    carInfo (id) {
      this.$refs['formValidate'].resetFields()
      let data = {
        id: id
      }
      this.formValidate = {}
      carInfoList(data).then((ret) => {
        if (ret.data.errcode === 0) {
          this.formValidate = ret.data.data[0]
          this.addflag = 0
        } else {
          this.$Notice.error({ title: '导出失败！', desc: ret.data.errmsg })
        }
      })
      this.modal1 = true
    },
    updateCarInfo () {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          if (this.addflag === 1) {
            this.addflag = 0
            this.formValidate.doorplate_id = this.doorplate_id
            addCarInfo(this.formValidate).then((ret) => {
              if (ret.data.errcode === 0) {
                this.$Message.success('保存成功')
                this.carInfoList()
                this.modal1 = false
              } else {
                this.$Notice.error({
                  title: '保存失败！',
                  desc: ret.data.errmsg
                })
              }
            })
          } else {
            updateCarInfo(this.formValidate).then((ret) => {
              if (ret.data.errcode === 0) {
                this.$Message.success('保存成功')
                this.carInfoList()
                this.modal1 = false
              } else {
                this.$Notice.error({
                  title: '保存失败！',
                  desc: ret.data.errmsg
                })
              }
            })
          }
        } else {
          this.$Message.error('请完善信息！')
          this.loading = false
        }
      })
    },
    addModal () {
      this.modal1 = true
      this.formValidate = {}
      this.addflag = 1
      this.$refs['formValidate'].resetFields()
    },
    delCarInfo (id) {
      if (confirm('确认删除？')) {
        let data = {
          id: id,
          del_flag: '1'
        }
        updateCarInfo(data).then((ret) => {
          if (ret.data.errcode === 0) {
            this.$Message.success('删除成功')
            this.carInfoList()
          } else {
            this.$Notice.error({ title: '删除失败！', desc: ret.data.errmsg })
          }
        })
      }
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
  }
}
</script>

<style scoped>
.cardSelect {
  width: 210px;
  margin: 5px 0px;
}

.card {
  margin-top: 1%;
  margin-bottom: 2%;
}

.zi {
  color: white;
}

.page_style {
  margin: 60px 20px;
}
</style>
